<template>
  <router-view></router-view>
  <van-tabbar
    class="tabbar"
    v-model="active"
    inactive-color="var(--textColor)"
    route
    placeholder
    safe-area-inset-bottom
    @change="onChange"
  >
    <van-tabbar-item
      to="index"
      :class="myName == 'index' ? 'name' : ''"
      name="index"
    >
      <template #icon><img src="../../assets/image/home1.png" /> </template>
      <span>首页</span>
    </van-tabbar-item>
    <van-tabbar-item
      to="news"
      :class="myName == 'news' ? 'name' : ''"
      name="news"
      icon="search"
      ><template #icon><img src="../../assets/image/home2.png" /> </template>
      <span>消息</span></van-tabbar-item
    >
    <van-tabbar-item
      to="my"
      :class="myName == 'my' ? 'name' : ''"
      name="my"
      icon="friends-o"
    >
      <template #icon><img src="../../assets/image/home3.png" /> </template>
      <span>我的</span>
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
import { defineComponent, ref } from "vue";

export default defineComponent({
  setup() {
    const myName = ref("index");
    const onChange = (name) => {
      myName.value = name;
    };
    return {
      onChange,
      myName,
    };
  },
});
</script>

<style lang="less" scoped>
.tabbar {
  z-index: 99;

  /deep/ .van-tabbar {
    z-index: 99;
    background-color: var(--backColor);
  }
  /deep/ .van-tabbar-item {
    // color: var(--textColor);
  }
}
.name {
  color: #c3ab84 !important;
  background-color: var(--backColorTwo);
}
</style>
